Problem

On the project dashboard, a language with a long name (e.g. "Arabic (Palestinian Territories) | العربية (الأراضي الفلسطينية)") shrinks the translation status progress bar to a sliver — for every language row, since all rows share one grid.

Cause

LanguageStats lays rows out with:

grid-template-columns: auto auto auto 10fr auto auto;

The auto name column grows to the name's full single-line (max-content) width — the text never wraps — and the 10fr bar column only receives leftover space, which can drop to zero.

Fix

grid-template-columns: fit-content(40%) auto auto minmax(120px, 1fr) auto auto;

• short names keep hugging their content, so the bar keeps nearly all its current width in the common case
• long names cap at 40% of the container and truncate with an ellipsis; the full name is shown in a tooltip on hover (same pattern as fix: add tooltip and responsive wrapping for long language names (#3611) #3657 uses for the LanguagesSelect dropdown), keeping every row single-line
• the bar column has a 120px floor and — because grid tracks are shared across rows — all bars stay equal width and aligned, so they remain visually comparable
• language tags get the same ellipsis treatment, so an overlong custom tag cannot clip the Base chip or bleed under the bar
• drive-by: removed a stray debug className="test" and redundant null-handling on the already-asserted language

Verification

Measured a standalone replica of the grid in a headless browser at 700px and 450px container widths, covering short-names-only, mixed long/short names, and an overlong unbreakable custom tag: bars are equal width across rows in all cases, names/tags truncate on a single line, nothing overlaps the bar, no horizontal overflow.

Related: #3657 addresses long language names in the LanguagesSelect dropdown — different component, same truncation pattern.